<template>
  <div class="main-box">
    <div class="page-head" v-if="!this.$store.state.user.userIsPhone">
      <PageHeader :parActiveName="activeName" />
    </div>
    <div v-else>
      <PageFoot :activeProps="active" />
    </div>
    <div class="day-form-box">
      <div class="entry-box">
        <div class="pro-day-title">日报信息录入</div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>基本信息</div>
        </div>
        <div class="staff-info-box">
          <div class="left-box">
            <div class="day-title">
              <div>员工姓名：</div>
              <div>填报日期：</div>
            </div>
            <div class="day-input">
              <div style="text-align: start">
                {{ this.$store.state.user.userName }}({{ this.$store.state.user.userCode }})
              </div>
              <div>
                <el-date-picker
                  v-model="todayDate"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="middle-box">
            <div class="day-title">
              <div>参与项目：</div>
            </div>
            <div class="day-input">
              <div>
                <el-select
                  v-model="proCode"
                  filterable
                  placeholder="请选择项目"
                  @change="selectProject"
                >
                  <el-option
                    v-for="(item, index) in proListOption"
                    :key="index"
                    :label="item.proshortname"
                    :value="item.procode"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="day-title">
              <div>工作类型：</div>
            </div>
            <div class="day-input">
              <div>
                <el-select v-model="workType" placeholder="请选择工作类型">
                  <el-option
                    v-for="item in stageOption"
                    :key="item.typeName"
                    :label="item.typeName"
                    :value="item.typeName"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>工作安排</div>
        </div>
        <div class="work-form-box">
          <div class="left-box">
            <div>今日已完成：</div>

            <div>今日未完成：</div>

            <div>明日计划：</div>

            <!-- <div class="title-div">寻求支持：</div>
          <div class="body-div"><textarea v-model="support" /></div> -->
          </div>
          <div class="right-box">
            <div><textarea v-model="todayFinish" /></div>
            <div><textarea v-model="todayIncomplete" /></div>
            <div><textarea v-model="tomorrowPlan" /></div>
          </div>
        </div>
        <div class="head-box" style="height: 0"></div>
        <div class="btn-box">
          <div class="remove-btn" @click="resetting">取消</div>
          <div class="sub-btn" @click="submitDailyData">提交</div>
        </div>
      </div>
      <div class="daily-info-list" v-if="!this.$store.state.user.userIsPhone">
        <DailyInfoList
          :dailyList="dailyList"
          :openInfoDrawer="openInfoDrawer"
        />
      </div>
      <div v-if="!this.$store.state.user.userIsPhone">
        <Drawer
          ref="infoDrawerRef"
          :drawer="drawer"
          :dailyInfoRow="dailyInfoRow"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import PageFoot from '@/components/PageFoot.vue'
import DailyInfoList from './ui/DailyInfoList.vue'
import Drawer from './ui/Drawer.vue'
import {
  getStageProjectListApi,
  subDailyPaperApi,
  getDailyInfoListApi
} from '@/api/index'
export default {
  components: {
    PageHeader,
    PageFoot,
    DailyInfoList,
    Drawer
  },
  data () {
    return {
      activeName: 'third',
      // 员工姓名
      empName: '',
      // 填写日期
      todayDate: new Date(),
      // 项目列表
      proListOption: [],
      // 选择的项目
      proCode: '',
      // 项目地址
      address: '',
      //工作类型源数据
      stageOption: [
        {
          typeName: '远程支持'
        },
        {
          typeName: '出差现场'
        }
      ],
      // 选择的工作类型
      workType: '',
      // 今日已完成
      todayFinish: '',
      // 今日未完成
      todayIncomplete: '',
      // 明日计划
      tomorrowPlan: '',
      // 寻求支持
      support: '',
      // 底部导航栏
      active: 1,
      // 是否弹框
      drawer: false,
      // 点击的信息
      dailyInfoRow: {},
      // 日报列表
      dailyList: []
    }
  },

  mounted () {
    this.getAllProjectData()
    this.getDailyInfoList()
  },

  methods: {
    // 获取日报列表
    async getDailyInfoList () {
      let data = {
        empname: this.$store.state.user.userName
      }
      let res = await getDailyInfoListApi(data)
      this.dailyList = [ ...res ]
      console.log('日报列表----->', this.dailyList)
    },
    // 打开日报信息查看抽屉
    openInfoDrawer (row) {
      this.dailyInfoRow = { ...row }
      this.$refs.infoDrawerRef.openDrawer(row)
    },

    // 获取全部项目数据
    async getAllProjectData () {
      this.active = null
      let res = await getStageProjectListApi()
      this.proListOption = res
      console.log('proList------->', this.proListOption)
    },

    selectStep (num) {
      this.type = num
    },

    selectProject (row) {
      this.address = this.proListOption.find(item => {
        return item.procode === row
      }).proaddress
      console.log('选择的项目----->', this.address)
    },

    // 提交表单
    async submitDailyData () {
      if (
        !this.proCode ||
        !this.workType ||
        !this.todayFinish ||
        !this.todayIncomplete ||
        !this.tomorrowPlan
      ) {
        this.$message.warning('请将信息填写完整！！！')
        return
      }
      let data = {
        proCode: this.proCode,
        proaddress: this.address,
        worktype: this.workType,
        workcontent: this.todayFinish,
        unfinishworktoday: this.todayIncomplete,
        planworktomorrow: this.tomorrowPlan,
        empcode: this.$store.state.user.userCode
      }
      let res = await subDailyPaperApi(data)
      if (res === '日报添加成功') {
        this.$message.success('日报提交成功！！！')
        this.resetting()
        if (this.$store.state.user.userIsPhone) {
          this.$router.push('/MobileHomeView')
        } else {
          this.$router.push('/tablePage')
        }
      } else {
        this.$message.success(`${res}！！！`)
      }
    },

    // 重置
    resetting () {
      this.empName = ''
      this.todayDate = ''
      this.proCode = ''
      this.workType = ''
      this.todayFinish = ''
      this.todayIncomplete = ''
      this.tomorrowPlan = ''
      this.support = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  text-align: center;
  background: #fff;
  .day-form-box {
    display: flex;

    /* border: 1px solid red; */
    width: 1380px;
    height: 94vh;
    margin-left: 2%;
    .entry-box {
      width: 75%;
      border-right: 1px solid #dddcdc;
    }
    .daily-info-list {
      width: 25%;

      /* border: 1px solid red; */
      max-height: 82vh;
      overflow: auto;
    }
    .daily-info-list:hover {
      cursor: pointer;
    }
    .daily-info-list::-webkit-scrollbar {
      width: 4px;
    }
    .daily-info-list::-webkit-scrollbar-thumb {
      background: fade(rgb(78 182 214), 60%);
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
      opacity: 0.2;
    }
    .daily-info-list::-webkit-scrollbar-track {
      background: fade(rgb(78 182 214), 30%);
      border-radius: 0;
      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
    }
    .pro-day-title {
      height: 40px;

      /* border: 1px solid #dddcdc; */
      font-weight: bold;
      font-size: 24px;
      line-height: 40px;
    }
    .head-box {
      display: flex;
      align-items: center;
      height: 30px;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 20px;
      font-size: 18px;
      line-height: 30px;
      text-align: start;
      border-bottom: 1px solid #dddcdc;
      .identifier-box {
        width: 5px;
        height: 10px;
        margin-right: 6px;
        background: #11a70c;
      }
    }
    .staff-info-box {
      display: flex;

      /* border: 1px solid blue; */
      padding-left: 5%;
      .left-box,
      .middle-box,
      .right-box {
        display: flex;

        /* border: 1px solid blue; */
        width: 33%;
        > div {
          font-size: 15px;
        }
      }
      .left-box {
        > .day-title {
          width: 30%;
          font-size: 15px;

          /* border: 1px solid green; */
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
          }
        }
        .day-input {
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
            > input {
              width: 96%;
              height: 25px;
            }
            .el-date-editor {
              width: 100%;
            }
            .el-select {
              width: 100%;
            }
          }
        }
      }
      .middle-box {
        margin-right: 4%;
        > .day-title {
          width: 38%;

          /* border: 1px solid green; */
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
          }
        }
        .day-input {
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
            > input {
              width: 96%;
              height: 25px;
            }
            .el-date-editor {
              width: 100%;
            }
            .el-select {
              width: 100%;
            }
          }
        }
      }
      .right-box {
        > .day-title {
          width: 27%;

          /* border: 1px solid green; */
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
          }
        }
        .day-input {
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            margin: 10px 0;
            line-height: 30px;
            text-align: end;
            > input {
              width: 96%;
              height: 25px;
            }
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
    .work-form-box {
      display: flex;

      /* border: 1px solid blue; */
      padding-left: 5%;
      .left-box,
      .right-box {
        /* border: 1px solid blue; */
        > div {
          width: 100%;

          /* border: 1px solid green; */
          height: 80px;
          margin-top: 15px;
          font-size: 14px;
        }
      }
      .left-box {
        width: 10%;

        /* border: 1px solid green; */
        > div {
          font-size: 15px;
          text-align: end;
        }
        .title-div {
          width: 100%;

          /* border: 1px solid green; */
          height: 30px;
          line-height: 30px;
        }
        .body-div {
          width: 100%;

          /* border: 1px solid green; */
          height: 60px;
          margin-bottom: 20px;
          line-height: 30px;
          > textarea {
            width: 96%;
            height: 70px;
            border: 1px solid #dcdfe6;
            resize: none;
          }
          .el-date-editor {
            width: 100%;
          }
        }
      }
      .right-box {
        width: 90%;

        /* border: 1px solid green; */
        > div {
          /* border: 1px solid green; */
          width: 100%;
          line-height: 30px;
          text-align: start;
          > textarea {
            width: 97%;
            height: 70px;
            font-size: 14px;
            border: 1px solid #dcdfe6;
            resize: none;
          }
        }
        .body-div {
          width: 100%;

          /* border: 1px solid green; */
          height: 60px;
          margin-bottom: 20px;
          line-height: 30px;
          text-align: start;
          .el-date-editor {
            width: 100%;
          }
        }
      }
    }
    .btn-box {
      /* border: 1px solid red; */
      display: flex;
      width: 200px;

      /* justify-content: end; */
      padding-left: 80%;
      > div {
        /* border: 1px solid green; */
        width: 62px;
        height: 32px;
        margin: 15px;
        font-size: 12px;
        line-height: 32px;
        text-align: center;
        border-radius: 5px;
      }
      .sub-btn {
        color: #fff;
        background: #67c23a;
      }
      .sub-btn:hover {
        color: #fff;
        background: #85ce61;
        border-color: #85ce61;
        cursor: pointer;
      }
      .remove-btn {
        color: #000;
        background: rgba($color: #000, $alpha: 0%);
        border: 1px solid #dcdfe6;
      }
      .remove-btn:hover {
        color: #409eff;
        background-color: #ecf5ff;
        border-color: #c6e2ff;
        cursor: pointer;
      }
    }
  }
}

@media screen and (width <= 768px) {
  .main-box {
    text-align: center;
    background: #fff;
    .day-form-box {
      /* border: 1px solid #db0d0d; */
      width: 99vw;
      height: 90vh;
      overflow: auto;
      .entry-box {
        width: 100%;
        border: none;
      }
      .pro-day-title {
        height: 40px;

        /* border: 1px solid #dddcdc; */
        font-weight: bold;
        font-size: 24px;
        line-height: 40px;
      }
      .head-box {
        display: flex;
        align-items: center;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        font-size: 18px;
        line-height: 30px;
        text-align: start;
        border-bottom: 1px solid #dddcdc;
        .identifier-box {
          width: 5px;
          height: 10px;
          margin-right: 6px;
          background: #11a70c;
        }
      }
      .staff-info-box {
        display: flex;
        flex-wrap: wrap;

        /* border: 1px solid blue; */
        margin-left: 1px;
        .left-box,
        .middle-box,
        .right-box {
          /* border: 1px solid blue; */
          width: 100%;

          /* display: flex; */
        }
        .left-box {
          > .day-title {
            width: 25%;

            /* border: 1px solid green; */
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              font-size: 14px;
              line-height: 30px;
              text-align: end;
            }
          }
          .day-input {
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              line-height: 30px;
              text-align: end;
              > input {
                width: 96%;
                height: 25px;
                border: 1px solid #dcdfe6;
              }
              .el-date-editor {
                width: 100%;
              }
              .el-select {
                width: 100%;
              }
            }
          }
        }
        .middle-box {
          margin-right: 4%;
          > .day-title {
            width: 25%;

            /* border: 1px solid green; */
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              font-size: 14px;
              line-height: 30px;
              text-align: end;
            }
          }
          .day-input {
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              padding-left: 3px;
              line-height: 30px;
              text-align: end;
              > input {
                width: 100%;
                height: 25px;
              }
              .el-date-editor {
                width: 100%;
              }
              .el-select {
                width: 108%;
              }
            }
          }
        }
        .right-box {
          > .day-title {
            width: 25%;

            /* border: 1px solid green; */
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              font-size: 14px;
              line-height: 30px;
              text-align: end;
            }
          }
          .day-input {
            > div {
              width: 100%;

              /* border: 1px solid green; */
              height: 30px;
              margin: 10px 0;
              line-height: 30px;
              text-align: end;
              > input {
                width: 96%;
                height: 25px;
              }
              .el-select {
                width: 109%;
              }
            }
          }
        }
      }
      .work-form-box {
        display: flex;

        /* border: 1px solid blue; */
        padding-left: 5%;
        .left-box,
        .right-box {
          /* border: 1px solid blue; */
          > div {
            width: 100%;

            /* border: 1px solid green; */
            height: 80px;
            margin-top: 15px;
            font-size: 14px;
          }
        }
        .left-box {
          width: 30%;

          /* border: 1px solid green; */
          > div {
            text-align: end;
          }
          .title-div {
            width: 100%;

            /* border: 1px solid green; */
            height: 30px;
            line-height: 30px;
          }
          .body-div {
            width: 100%;

            /* border: 1px solid green; */
            height: 60px;
            margin-bottom: 20px;
            line-height: 30px;
            > textarea {
              width: 96%;
              height: 70px;
              border: 1px solid #dcdfe6;
              resize: none;
            }
            .el-date-editor {
              width: 100%;
            }
          }
        }
        .right-box {
          width: 60%;

          /* border: 1px solid green; */
          > div {
            /* border: 1px solid green; */
            width: 100%;
            line-height: 30px;
            text-align: start;
            > textarea {
              width: 97%;
              height: 70px;
              font-size: 14px;
              border: 1px solid #dcdfe6;
              resize: none;
            }
          }
          .body-div {
            width: 100%;

            /* border: 1px solid green; */
            height: 60px;
            margin-bottom: 20px;
            line-height: 30px;
            text-align: start;
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
      .btn-box {
        display: flex;
        padding-left: 30%;
        > div {
          font-size: 12px;
        }
        .sub-btn {
          color: #fff;
          background: #67c23a;
        }
        .sub-btn:hover {
          color: #fff;
          background: #85ce61;
          border-color: #85ce61;
          cursor: pointer;
        }
        .remove-btn {
          color: #000;
          background: rgba($color: #000, $alpha: 0%);
          border: 1px solid #dcdfe6;
        }
        .remove-btn:hover {
          color: #409eff;
          background-color: #ecf5ff;
          border-color: #c6e2ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>